<template>
 <div class="yhqbody">
    <div  class="coupon_item" v-for="(item,index) in data" :key="item.id">
          <img :class="couponPath === 1?(item.default?'ylq':''):''" src="../assets/img/yhq_bj.png" alt />
          <div class="item_body">
            <div>
              <div>
                <div v-if="item.type === 'percent'">{{parseInt(item.value)}}%</div>
                <div v-else-if="item.type === 'fixed'">{{item.value}}</div>
                <div>{{item.name}}</div>
              </div>
              <div>{{item.description}}</div>
              <div>{{item.not_before.trim().split(" ")[0]}} -- {{item.not_after.trim().split(" ")[0]}}</div>
            </div>
            <div v-if="couponPath === 1">
                <div ><span :class="item.default?'ylqtext':''">优惠折扣</span></div>
                <div v-if="item.default" class="receive_yhq" style=" margin-top:20px">
                    <span>已<br>领<br>取</span>
                </div>
                <div class="receive_yhq" @click="receive_btn(item.id,index)" v-else>
                    <span>领<br>取<br>优<br>惠<br>券</span>
                </div>
            </div>
            <div v-else-if="couponPath === 2">
                <div ><span>优惠折扣</span></div>
                <div  class="receive_yhq" style=" margin-top:20px">
                    <span>优<br>惠<br>券</span>
                </div>
            </div>
          </div>
        </div>
 </div>
</template>

<script>
import { receivecoupon } from "../api/goods";
export default {
    name:'coupon-item',
    data() {
        return {
            typea:''
        }
    },
    props:{
        data:{
            type:Array,
            default:() => {}
        },
        couponPath:{
            type:Number,
            default:1
        },
    },
    methods: {
       async receive_btn(id,index){
        this.data[index].default = true
        const res = await receivecoupon(id)
         this.$message.success('领取成功')
        },
    },
}
</script>

<style lang="scss" scoped>
    .coupon_item {
  height: 120px;
  min-width: 30%;
  max-width: 30%;
  position: relative;
  flex: 1;
  margin-bottom: 60px;
  transition: all 0.3s;
  &:hover{
      transform: scale(0.9,0.9);
  }
  > img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    //通过改变透明度来调节灰色的程度
  }
  .item_body {
    position: absolute;
    display: flex;
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 0;
    > div {
      &:nth-child(1) {
        padding: 10px;
        padding-left: 20px;
        flex: 5;
        >div{
            &:nth-child(1){
                display: flex;
                align-items: center;
                >div{
                    &:nth-child(1){
                        font-size: 30px;
                        color: #ff0000;
                        font-weight: 600;
                    }
                    &:nth-child(2){
                        margin-left: 10px;
                        font-size: 15px;
                    } 
                }
            }
            &:nth-child(2){
                margin-top: 10px;
                color: #666666;
            }
            &:nth-child(3){
                margin-top: 10px;
            }
        }
      }
      &:nth-child(2) {
        flex: 2;
        margin-left: 5px;
        >div{
            &:nth-child(1){                
                text-align: center;
                >span{
                    background-color: #ffc8c8;
                    padding: 0 6px 3px 6px;
                    border-radius: 0 0 8px 8px;
                    color: #ff0000;
                }
            }
        }
      }
    }
  }
}
.receive_yhq{
    text-align: center;
     font-size: 17px;
     color: #fff;
     margin-top: 10px;
     cursor: pointer;
}
.ylq{
    filter: grayscale(100%);
    filter: #bfbfbf;
    opacity: 0.5;
}
.ylqtext{
    background-color: #fff!important;
    color: #bfbfbf!important;
}

.yhqbody{
    margin: 30px 0;
    padding: 26px 40px;
    width: 100%;
   box-shadow: #ffffff 0px 0px 20px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
</style>